<template>
  <div class="tableWrap">
    <a-table ref="tableRef" :rowKey="rowKeySet[Number(menuId)]" :columns="columnsList" :data-source="dataSource"
      :scroll="{ y: 'calc(100vh - 162px - 60px + 6px)', x: '100%', }" row-key="id" :pagination="false"
      :loading="loading" :expandIcon="customExpandIcon" @change="onChange" :rowClassName="rowClassName"
      @rowClick="rowHandClick">
      <span slot="rolePermission" slot-scope="text, record">
        <ToolTip :record="record" :value="text" :columnsList="columnsList" :dataSource="dataSource"
          type="rolePermission"></ToolTip>
      </span>
      <span slot="menuRoles" slot-scope="text, record">
        <ToolTip :record="record" :value="text" :columnsList="columnsList" :dataSource="dataSource" type="menuRoles">
        </ToolTip>
      </span>
      <span slot="options" slot-scope="text, record" @click.stop>
        <ShowModal :record="record" v-if="[2, 3, 4].includes(Number(menuId))"></ShowModal>
        <template v-if="[6, 7, 8, 16, 92, 994, 993, 995, 996, 977].includes(Number(menuId))">
          <a-space size="small">
            <AddButton :menuId="menuId" :ids="record[rowKeySet[Number(menuId)]]" :onRefresh="onRefresh"
              :aParams="aParams" v-if="![993].includes(Number(menuId))">
            </AddButton>
            <CodeBUtton v-if="[977].includes(Number(menuId)) && staticData.isCode" :menuId="menuId"
              :ids="record[rowKeySet[Number(menuId)]]" :onRefresh="onRefresh" :aParams="aParams" :record="record">
            </CodeBUtton>
            <DeleteButton :menuId="menuId" :ids="record[rowKeySet[Number(menuId)]]" :onRefresh="onRefresh"
              v-if="![994, 995].includes(Number(menuId))">
            </DeleteButton>
            <template v-if="[994,].includes(Number(menuId)) && false">
              <ChangeBtn :item="record" :onRefresh="onRefresh"></ChangeBtn>
            </template>
          </a-space>
        </template>
        <!-- 入住审核功能 -->
        <template v-else-if="[962].includes(Number(menuId))">
          <a-space v-if="record['applyStatus'] == '申请中'">
            <Examine :record="record" :onRefresh="onRefresh" type="agree"></Examine>
            <Examine :record="record" :onRefresh="onRefresh" type="refuse"></Examine>
          </a-space>
        </template>
      </span>
      <div :slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <template v-if="Array.isArray(record.images)">
          <viewer>
            <div class="imageWrap">
              <a-space>
                <div class="imageItem" v-for="(item, index) in record.images" :key="item + index">
                  <img :src="item" class="img" />
                </div>
              </a-space>
            </div>
          </viewer>
        </template>
        <template v-else>
          <span style="color: #cdcdcd">暂无图片</span>
        </template>
      </div>
      <!-- 灭火器页面相关 -->
      <div slot="fireId" slot-scope="text,record">
        <FireModalList :record="record" :text="text" :type="tableName" :menuId="menuId" :otherData="otherData"
          :onCallBack="changeShowId" :isVisible="showId == record.id">
        </FireModalList>
      </div>
      <span slot="fireTerm" slot-scope="text">
        {{ text }}年
      </span>
      <span slot="fireIssearch" slot-scope="text" v-if="ids == '994'">
        {{ { '1': '未检查', '2': '已检查' }[text] }}
      </span>
      <span slot="fireType" slot-scope="text">
        {{ { '1': '月检', '2': '半月检' }[text] }}
      </span>
      <span slot="fvqSreachType" slot-scope="text">
        {{ { '1': '年检', '2': '半年检' }[text] }}
      </span>
      <span slot="fvqIssearch" slot-scope="text">
        {{ { '1': '未检查', '2': '已检查' }[text] }}
      </span>
    </a-table>
  </div>
</template>

<script>
import { columns, rowKeySet } from "./js/js.js";
import ShowModal from "./ShowModal";
import AddButton from "./AddButton.vue";
import DeleteButton from "./DeleteButton.vue";
import ToolTip from "./components/ToolTip";
import ChangeBtn from './components/Options/ChangeBtn';
import FireModalList from './Fire/FireModalList.vue'
import Examine from './components/Options/Examine.vue';
import CodeBUtton from './Fire/CodeBUtton.vue';

export default {
  name: "TableList",
  components: {
    ShowModal,
    AddButton,
    DeleteButton,
    ToolTip,
    ChangeBtn,
    FireModalList,
    Examine,
    CodeBUtton,
  },
  props: {
    tableName: {
      type: [String, Number],
    },
    dataList: {
      type: [Array, Object],
      default: () => [],
    },
    menuId: {
      type: [String, Number],
    },
    onRefresh: {
      type: Function,
      default: () => { },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    otherData: {
      type: Object,
      default: () => { },
    },
    staticData: {
      type: Object,
      default: () => { },
    },
    treeKey: {
      type: Object,
    },
    sponsoredUnit: {
      type: [String, Number],
    }
  },
  data() {
    return {
      columnsList: [],
      dataSource: [],
      rowKeySet: {},
      sorter: {
        field: undefined,
        order: false,
      },
      expandedRowRender: undefined,
      showId: '',
    };
  },
  methods: {
    customExpandIcon(props) {
      if (props.record && props.record.images && props.record.images.length > 0) {
        if (props.expanded) {
          return (
            <a-icon
              style="color: rgba(0,0,0,0.4);padding:10px 5px;box-sizing:border-box;"
              type="minus-square"
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            />
          );
        } else {
          return (
            <a-icon
              style="color: rgba(0,0,0,0.4);padding:10px 5px;box-sizing:border-box;"
              type="plus-square"
              onClick={(e) => {
                props.onExpand(props.record, e);
              }}
            />
          );
        }
      } else {
        return <span></span>;
      }
    },
    onChange(pagination, filters, sorter) {
      let newSort = {
        field: sorter.field,
        order: { ascend: "ASC", descend: "DESC" }[sorter.order],
      };
      this.sorter = newSort;
      this.onRefresh({ sorter: newSort });
    },
    rowClassName(record, index) {
      let res = '';
      // 弃用，改为单列变色
      // if (record.colorType) {
      //   switch (record.colorType) {
      //     case '1':
      //       res = 'redWrap'
      //       break;
      //     case '2':
      //       res = 'yellowWrap'
      //       break;
      //     case '3':
      //       res = 'greenWrap'
      //       break;
      //   }
      // }
      return res;
    },
    changeShowId(i) {
      this.showId = i || '';
    },
    // 行点击事件
    rowHandClick(e) {
      if ([977].includes(Number(this.menuId))) {
        this.changeShowId(e.id);
      }
    }
  },
  mounted() {
    this.expandedRowRender = 'expandedRowRender'
    this.rowKeySet = rowKeySet;
  },
  computed: {
    aParams() {
      let obj = {};
      if (this.menuId == '92') {
        obj = this.otherData;
      }
      return obj;
    }
  },
  watch: {
    tableName: {
      handler() {
        this.columnsList = columns[this.tableName];
      },
      deep: true,
      immediate: true,
    },
    treeKey: {
      handler(nVal, oVal) {
        if (this.menuId == 3) {
          let staticColumn = columns[this.tableName]
          staticColumn = staticColumn.filter(v => {
            let res = true;
            if (Array.isArray(v.isShowTreeArr) && v.isShowTreeArr.length > 0) {
              let treeKeyVal = (nVal && nVal.value) ? nVal.value : '';
              if (treeKeyVal && v.isShowTreeArr.includes(treeKeyVal)) {
                res = true;
              } else {
                res = false;
              }
            }
            return res;
          })
          this.columnsList = staticColumn
        }
      },
      deep: true,
      immediate: true,
    },
    dataList: {
      handler() {
        this.dataSource = this.dataList;
        this.$nextTick(() => {
          let tableRef = this.$refs.tableRef.$el;
          window.tableRef = tableRef;
          // 有固定列就是第一个，没有固定列就是第二个
          let scrollClass = tableRef.querySelector('.ant-table-body-inner') || tableRef.querySelector('.ant-table-body');
          if (scrollClass) {
            scrollClass.scrollTop = 0;
          }
        });
      },
      deep: true,
      immediate: true,
    },
    otherData: {
      handler(nVal, oVal) {
        if (nVal.sorter) {
          this.sorter = nVal.sorter;
        } else {
          this.sorter = {
            field: "",
            order: false,
          };
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
.tableWrap {
  width: 100%;
  height: 100%;
  cursor: pointer;

  /* 修改表头背景色 */
  ::v-deep {

    // 行背景颜色
    .redWrap {
      background-color: rgba(255, 0, 0, 0.2) !important;
    }

    .yellowWrap {
      background-color: rgba(255, 255, 0, 0.2) !important;
    }

    .greenWrap {
      background-color: rgba(0, 128, 0, 0.2) !important;
    }

    .ant-table-body {
      overflow: auto !important;

      ::-webkit-scrollbar-track {
        opacity: 0;
        background-color: transparent;
        /* 轨道颜色 */
      }
    }

    .ant-table-thead>tr>th {
      background-color: #f5f7fa;
      border-width: 6px;
    }

    .ant-table-wrapper {
      max-width: 100%;
    }

    // 表格右侧浮动的样式
    .ant-table-fixed-right {
      .ant-table-body-outer {
        margin-top: -5px;
      }

      .ant-table-body-outer {

        /* 全局样式，作用于所有滚动条 */
        ::-webkit-scrollbar {
          // width: 10px;
          /* 垂直滚动条的宽度 */
          // height: 10px;
          /* 水平滚动条的高度 */
        }

        ::-webkit-scrollbar-track {
          opacity: 0;
          background-color: transparent;
          /* 轨道颜色 */
        }

        ::-webkit-scrollbar-thumb {
          background-color: transparent;
          /* 滑块颜色 */
        }

        ::-webkit-scrollbar-thumb:hover {
          background: red;
          /* 滑块hover颜色 */
        }

        .ant-table-body-inner {}
      }
    }
  }
}

.ant-table td {
  white-space: nowrap;
}

.imageWrap {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;

  .imageItem {
    width: 70px;
    height: 70px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
